<template>
    <div class="add-active detailsPageBox">
        <div class="detailsMain">
            <el-form :model="data" label-width="90px" :rules="rule" ref="activityForm">
                <el-form-item label="活动名称:" prop="activityName">
                    <el-input placeholder="请输入活动名称" v-model="data.activityName" class="item-width" />
                </el-form-item>
                <el-form-item label="活动时间:" prop="activityDate">
                    <div class="item-width">
                        <el-date-picker v-model="data.activityDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange" range-separator="至" />
                    </div>
                </el-form-item>
                <el-form-item label="活动地址:">
                    <div class="item-width">
                        <ChooseAddress width="100%" :showDetailAddress="true" @changeAddress="changeAddress"></ChooseAddress>
                    </div>
                </el-form-item>
                <el-form-item label="会议厂商选择:">
                    <el-select class="item-width" v-model="data.activityNetwordMeetCode" placeholder="请选择" @change="v => { data.activityNetwordMeetCode = v }">
                        <el-option :label="meeting" :value="meetingKey" v-for="(meeting, meetingKey) in data.meetingList" :key="meetingKey" />
                    </el-select>
                </el-form-item>
                <el-form-item label="会议号:">
                    <el-input v-model="data.activityNetwordMeetLink" class="item-width" />
                </el-form-item>
                <el-form-item label="活动图片:">
                    <div>
                        <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false" :file-list="data.fileListBefore" :on-change="avatarUpload">
                            <img v-if="data.imageUrl" :src="data.imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <div>请上传活动宣传图片，如果不上传图片会使用系统默认图片哦~</div>
                    </div>
                </el-form-item>
                <el-form-item label="活动介绍:" prop="activityBrief">
                    <TextEditor @textEdit="textEdit" :type="0" :html="data.activityBrief"></TextEditor>
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="data.valid">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否热门:">
                    <el-radio-group v-model="data.isHot">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>

        <div class="send-btn detailsHandBtn">
            <el-button type="primary" style="width: 100px; height: 36px" @click="addActivity">提交</el-button>
            <el-button type="primary" style="width: 100px; height: 36px" @click="data.previewDialog = true">预览</el-button>
            <el-button style="width: 100px; height: 36px" @click="resetForm">重置</el-button>
        </div>

        <el-dialog v-model="data.previewDialog" :title="data.activityName" width="60%">
            <template #default>
                <div class="dialog-container">
                    <div class="top">
                        <div class="left">
                            <img v-if="data.imageUrl" :src="data.imageUrl" />
                        </div>
                        <el-form :model="data" label-width="80px" class="right">
                            <el-form-item label="活动名称:">
                                <div>{{ data.activityName }}</div>
                            </el-form-item>
                            <el-form-item label="活动时间:">
                                <div>{{ data.activityDate.join(' —— ') }}</div>
                            </el-form-item>
                            <el-form-item label="活动地址:">
                                <div>{{ data.address ? data.address.provinceName + data.address.cityName + data.address.areaName + data.address.detailAddress : '' }}</div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="bottom">
                        <div class="title">活动介绍</div>
                        <div class="content" v-html="data.activityBrief"></div>
                    </div>
                </div>
            </template>
            <template #footer>
                <div style="text-align: center">
                    <el-button type="primary" @click="data.previewDialog = false">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted, computed } from 'vue'
import { addActivityApi, getActivityMeetingDictApi } from '@/api/interface/activity.js'
import { uploadFileApi } from '@/api/public/uploadFile.js'

import { ElMessageBox, ElMessage } from 'element-plus'
import { backRoute } from '@/utils/common.js'

import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const activityForm = ref(null)

const data = reactive({
    activityName: '',
    activityDate: [],
    address: null,
    imageUrl: '',
    fileIdList: [],
    activityNetwordMeetCode: '',//会议厂商
    activityNetwordMeetLink: '',
    meetingList: [],
    activityBrief: '',
    isHot: false,
    valid: false,
    fileListBefore: [],
    previewDialog: false,
})
const rule = reactive({
    activityName: {
        required: true,
        validator: (rule, value, callback) => {
            if (/^[\u4e00-\u9fa5/a-zA-Z0-9]{2,20}$/.test(value) == false) {
                callback(new Error('请输入正确的活动名称'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    activityDate: [
        { required: true, trigger: ['change', 'blur'], message: '请选择日期' },
        {
            validator: (rule, value, callback) => {
                console.log(value);
                if (new Date(value[1]).getTime() < new Date().getTime()) {
                    callback(new Error('请输入正确的时间'))
                } else {
                    callback()
                }
            },
            trigger: 'change',
        },
    ],
    activityBrief: {
        required: true,
        validator: (rule, value, callback) => {
            if (value == '<p><br></p>') {
                callback(new Error('请填写需求描述'))
            } else {
                callback()
            }
        },
        trigger: ['blur', 'change', 'input'],
    },
})


onMounted(() => {
    const level = router.currentRoute.value.meta.level
    store.dispatch('setting/setRouterCut', level)
})
onUnmounted(() => {
    store.dispatch('setting/setRouterCut', 2)
})


//上传头像
const avatarUpload = (file, files) => {
    let Image = file.raw

    if (Image.type !== 'image/jpeg' && Image.type !== 'image/jpg' && Image.type !== 'image/gif' && Image.type !== 'image/webp' && Image.type !== 'image/png') {
        ElMessage.error('请上传正确格式的图片')
        data.fileListBefore = []
        files = []
        return
    }
    if (Image.size / 1024 / 1024 > 5) {
        ElMessage.error('图片大小必须小于5M!')
        data.fileListBefore = []
        files = []
        return
    }

    let fd = new FormData()
    fd.append('file', Image)
    uploadFileApi(fd).then(res => {
        if (res.status === 200) {
            data.imageUrl = URL.createObjectURL(Image)
            data.fileIdList = [res.data]
        }
    })
}

const getActivityMeetingDict = () => {
    getActivityMeetingDictApi().then(res => {
        data.meetingList = res.data
    })
}
getActivityMeetingDict()

//获取地址
const changeAddress = (info) => {
    data.address = info
}
//富文本
const textEdit = (text, type) => {
    if (type === 0) {
        data.activityBrief = text
    }
}




//新增活动
const addActivity = async () => {
    const a = await activityForm.value.validate(boo => boo)
    if (!a) return
    const params = {
        activityName: data.activityName,
        activityStartDate: data.activityDate[0],
        activityEndDate: data.activityDate[1],
        activityProvinceName: data.address.provinceName,
        activityProvinceCode: data.address.provinceCode,
        activityCityName: data.address.cityName,
        activityCityCode: data.address.cityCode,
        activityAreaName: data.address.areaName,
        activityAreaCode: data.address.areaCode,
        activityAddress: data.address.detailAddress,
        activityBrief: data.activityBrief,
        isHot: data.isHot,
        valid: data.valid,
        activityNetwordMeetCode: data.activityNetwordMeetCode,//科技活动线上网络会议名称
        activityNetwordMeetLink: data.activityNetwordMeetLink,//科技活动线上网络地址
        fileIdList: data.fileIdList,
        // activityPersonCount: 100,
        // publishDate: new Date(),
        // activityContactPerson: "张三",
        // activityContactPhone: "100",
        // activityType: "线下活动",
        // activityApplyExpirationDate: "2022-02-02",
    }
    addActivityApi(JSON.stringify(params)).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: res.message,
                type: 'success',
            })
            backRoute('Activity')

        }
    })
}
//重置表单
const resetForm = () => {
    data.activityName = ''
    data.activityDate = []
    data.address = null
    data.imageUrl = ''
    data.fileIdList = []
    data.activityBrief = ''
    data.isHot = false
    data.valid = false
    data.fileListBefore = []
}

</script>

<style lang="scss" scoped>
.dialog-container {
    .top {
        display: flex;
        padding: 16px;
        height: 170px;
        border: 1px solid #e3e3e3;

        .left {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 3;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .right {
            margin-left: 20px;
            flex: 5;

            .el-form-item {
                margin-bottom: 0;
            }

            :deep(.el-form-item__label) {
                font-size: 14px;
                font-weight: 700;
                color: #999;
            }

            :deep(.el-form-item__content) {
                font-size: 14px;
                font-weight: 700;
            }
        }
    }

    .bottom {
        margin-top: 20px;

        .title {
            font-size: 16px;
            font-weight: 700;
        }
    }
}

.add-active {
    padding: 20px;

    ::v-deep .el-form-item__label {
        font-weight: 700;
    }

    ::v-deep .el-range-separator {
        font-size: 12px;
    }

    .item-width {
        width: 36%;
        min-width: 400px;
        // max-width: 500px;
    }

    .send-btn {
        padding-top: 20px;
        text-align: center;
        border-top: 1px solid #f5f7fd;
    }
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    background: #f5f7fd;
}</style>